/* CSS responsive fixed full width header, footer, content sections by Lindsey Di Napoli of CSSgirl Dev & Design */

* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}
body {
	background: #f1f0e6;
	color: #20205C;
	font: 100% Helvetica, Arial, sans-serif;
	line-height: 1.25em;
}
h1 {
	font-size: 1.5em;
	margin: 1em 0;
	line-height: 1.15em;
	text-align: center;
}
#h2 {
	font-size: 1.25em;
}
p {
	margin: 1.5em 0;
	font-size: 1em;
	line-height: 1.5em;
}
h2 {
	font-size: 1.2em;
	line-height: 1.1em;
}
h3 {
	font-size: 1.25em;
	line-height: 1.4em;
}
.container {
	margin: 0 auto;
	max-width: 75em;
	font-family: Arial, Helvetica, sans-serif;
}
.header, .footer, .post {
	padding: 1em;
}
.header, .footer, .header a, .footer a {
	color: #F7EB5B;
}
.header {
	background: #000000;
}
/* For this demo I have the logo and tagline at 50% of the screen on all screen sizes. Most likely you may need to adjust these widths and the breakpoints for various viewport sizes. */
.logo {
	width: 25%;
	float: left;
}
.portfolio {
	float: left;
	width: 20%;
	background-color: #FFF;
	font-size: 0.8em;
	line-height: 1em;
	padding: 10px;
}
a:link {
	color: #EB2A2F;
	text-decoration: none;
}
a:visited {
	color: #EB2A2F;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #EB2A2F;
	text-decoration: underline;
}
a:active {
	color: #EB2A2F;
	text-decoration: underline;
}
.tagline {
	width: 75%;
	float: left;
	background-color: #000;
}
.tagline {
	text-align: right;
}
.content {
	background-image: url(/2016%20images/Banner.jpg);
	background-size: cover;
	padding-top: 1em;
	padding-right: 0;
	padding-bottom: 1em;
	padding-left: 0;
}
.centre {
	text-align: center;
}
.content-second {
	background: #ffffff;
}

.content-third {
	background: #f7f2df;
}
.post-sidebar {
	float: left;
	width: 75%;
}
.sidebar-right {
	float: right;
	width: 25%;
	/* [disabled]padding: 1em; */
}

/* Media query to make the sidebar drop and stack below the content when the screen is smaller than 800px, and giving both the sidebar and content to the left 100% width. */
@media (max-width: 800px) {
.sidebar-right, .post-sidebar {
		width: 100%;
		float: none;
	}
	.sidebar-right {
		padding-top: 0;
	}
}

.box-area {
	padding: 1em;
	background: #000000;
	color: #F8EA63;
	margin-top: 1.2em;
}
.footer {
	text-align: center;
	background-color: #212064;
}
.bold {
	font-weight: bold;
	text-transform: uppercase;
}
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}